<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heard">
			<view class="heardTitle">
				<text>个人信息</text>
				<!-- <imageCropper></imageCropper> -->
			</view>
		</view>
		<view class="avatar" @click="getImageAndUpload()">
			<u-avatar size='60' :src="userInfos.headUrl"></u-avatar>
		</view>
		
		<view class="main">
			<view class="case">
				<u-row gutter="16">
					<u-col span="6">
						<view class="point-container-inline">
							<view class="point-container-inline">
								<text class="points">皮肤挂件</text>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="jiantou" @click="goToRegister(1)">
							<image class="guajian-icon"
								:src="userInfos.headUrl===null?'https://www.afbeijing.net/static_resources/assets/morentouxiang.jpg':userInfos.headUrl" />
							<image class="jiantou-icon"
								src="https://www.afbeijing.net/static_resources/assets/grxxjiantou.png" />
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="case">
				<u-row gutter="16">
					<u-col span="8">
						<view class="point-container-inline">
							<view class="point-container-inline">
								<text class="points">用户昵称</text>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="jiantou">
							<view class="caseInput-num">
								<input type="text" v-model="userInfos.fyName" @blur="getForm" class="inp-num" placeholder="请输入"
									placeholder-class="title_input" />
							</view>
							<image class="jiantou-icon"
								src="https://www.afbeijing.net/static_resources/assets/grxxjiantou.png" />
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="case">
				<u-row gutter="16">
					<u-col span="8">
						<view class="point-container-inline">
							<view class="point-container-inline">
								<text class="points">性别</text>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="jiantou" @click="goToRegister(2)">
							<view class="caseInput-num">
								<text v-if="userInfos.gender==='2'">女</text>
								<text v-if="userInfos.gender==='1'">男</text>
							</view>
							<image class="jiantou-icon"
								src="https://www.afbeijing.net/static_resources/assets/grxxjiantou.png" />
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="case">
				<u-row gutter="16">
					<u-col span="8">
						<view class="point-container-inline">
							<view class="point-container-inline">
								<text class="points">出生日期</text>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="jiantou" @click="goToRegister(3)">
						
							
							<view class="caseInput-num">
								{{userInfos.birthDate}}
							</view>
							<image class="jiantou-icon"
								src="https://www.afbeijing.net/static_resources/assets/grxxjiantou.png" />
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 日期 -->
		<u-datetime-picker
					ref="datetimePicker"
					:show="dataShow"
		            v-model="value1"
					@confirm="confirm"
					:formatter="formatter"
					confirmColor="#fff"
					mode="date"
		        ></u-datetime-picker>
		<!-- <u-calendar :show="dataShow" :min-date="minDate" :maxDate="maxDate" color="#FFB607" :mode="mode" @confirm="confirm"></u-calendar> -->
		<!-- 弹出班级选择 -->
		<u-popup :show="show" :round="30" mode="bottom" @close="close">
			<!-- keyName="label"  -->
			<u-picker :show="show" style="height: 100px;" @change="pickerChange" :columns="titleList" keyName="clsName"
				confirmText="取消" itemHeight="38" :title="titleText" cancelColor="#FFB607" confirmColor="#ffffff"
				@confirm="pickerCancel">
			</u-picker>
			<view class="button_qd" @click="pickerConfirm">确定</view>
		</u-popup>
		<!-- 弹出班级选择 结束 -->
	</view>
</template>

<script>
	import imageCropper from './components/index'
	import { selectInfo,updateInfo,updateHead } from './api/index.js'
	export default {
		data() {
			return {
				pageLoading:false,
				 value1: Number(new Date()),
				// date: this.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				// minDate: new Date('1980-01-01'), 
				// maxDate:new Date('2025-01-01'), 
				cropperSrc: '', // 裁剪图片的路径
				cropperImage: '', // 裁剪后的图片信息
				mode: 'single',
				dataShow:false,// 日期
				name: '李欣芮',
				xuanzhong: 1,
				formData:{},
				show: false,
				userInfos:{},//用户数据
				changeState: null,
				changeVle: null,
				titleList: [],
				titleText:'',
				age: '6岁',
				sex: '男'
			}
		},
		components:{
			imageCropper
		},
		watch: {
		    // 立即执行观察
		    userInfos: {
		      handler(newVal, oldVal) {
				  this.userInfos=newVal
		        console.log(`count changed from ${oldVal} to ${newVal}`);
		      },
		      immediate: true
		    }
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.getInfo()
		},
		mounted() {
			// this.getInfo()
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			async getImageAndUpload() {
				try {
					uni.navigateTo({
						url: '/src/views/pageMine/gerenxinxi/components/index' // 跳转到头像
					});
					// uni.chooseImage({
					// count: 1,
					// success: (res) => {
					//   this.cropperSrc = res.tempFilePaths[0];
					//   this.$refs.uCropper.initCropper(); // 初始化裁剪插件
					// }
				 //  });
						// const chooseImageRes = await uni.chooseImage({
	// 					count: 1,
	// 					sizeType: ['compressed'],
	// 					sourceType: ['album', 'camera']
	// 				});
 
	// 				const tempFilePaths = chooseImageRes.tempFilePaths;
	// 				if (tempFilePaths.length === 0) {
	// 					throw new Error('没有选择图片');
	// 				}
 
	// 				const imgPath = tempFilePaths[0];
 
	// 				const cropImageRes = await wx.cropImage({
	// 					src: imgPath, // 图片路径
	// 					cropScale: '1:1' // 裁剪比例   微信官方提供了多种裁剪比例以供选择
	// 				});
	// 				console.log(cropImageRes,'222222222')
 
	// 				const cropImgPath = cropImageRes.tempFilePath;
 
					// const token = this.$store.getters.getToken(); // 一般的上传接口都需要token校验。我这里应用了Vuex
					// const uploadRes = await wx.uploadFile({
					// 	url: config.baseURL + '/file/upload', // 你的服务器接口地址
					// 	filePath: cropImgPath,
					// 	name: 'file',
					// 	header: {
					// 		'Content-Type': 'multipart/form-data',
					// 		'Authorization': `Bearer ${token}`
					// 	}
					// });
 
					// const data = JSON.parse(uploadRes.data);
					// const {
					// 	code,
					// 	data: responseData,
					// 	message
					// } = data;
					
					// if(code==200){
					// 	// 头像上传成功
					// 	console.log('头像上传成功')
					// }
				} catch (error) {
					// 错误处理
					console.error(error);
					throw error;
				}
			},
			//查询个人信息
			getInfo(){
				selectInfo().then(response => {
					console.log(response)
					if (response.code === 0) {
						this.userInfos =response.data
					}else{
					 uni.$u.toast(response.msg) 
					}
				}).catch(errors => {
								// uni.$u.toast(errors)
				})
			},
			changeBtn(e) {
				this.xuanzhong = e
			},
			goToRegister(e) {
				console.log(1)
				switch (e) {
					case 1:
						uni.navigateTo({
							url: '/src/views/pageMine/jifenshangcheng/yiduihuan/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 2:
						this.show = true
						this.titleText = '选择性别'
						this.changeVle = e
						this.titleList = [
							['男', '女']
						]
						break;
					case 3:
						// this.show = true
						this.titleText = '选择日期'
						this.dataShow=true
						// this.changeVle = e
						// this.titleList = [
						// 	['6岁', '7岁', '8岁', '9岁']
						// ]
						break;
					default:
						break;
				}
			},
			// 弹出层交互使用********
			// 关闭弹出层
			close() {
				this.show = false
			},
			// 选择日期确定
			confirm(e){
				this.dataShow=false
				// / 将时间戳转换为Date对象
				let date = new Date(e.value);
				// 获取年月日并格式化为字符串
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
				let day = date.getDate().toString().padStart(2, '0');
				 
				// 组合为yyyy-mm-dd格式
				let formattedDate = `${year}-${month}-${day}`;
				this.formData.birthDate=formattedDate
				this.getForm()
			},
			// 选择确定
			pickerConfirm(e) {
				uni.$u.toast('切换成功')
				console.log('confirm', e,this.sex)
				this.show = false
				if(this.sex==='男'){
					this.formData.gender='1'
				}else{
					this.formData.gender='2'
				}
				this.getForm()
			},
			//保存个人信息
			getForm(){
				this.formData.fyName = this.userInfos.fyName
				updateInfo(this.formData).then(response => {
					console.log(response)
					if (response.code === 0) {
						uni.$u.toast('修改成功')
						this.getInfo()
						// this.userInfos =response.data
					}else{
					 uni.$u.toast(response.msg) 
					}
				}).catch(errors => {
								// uni.$u.toast(errors)
				})
			},
			// 选择取消
			pickerCancel(e) {
				console.log('confirm', e)
				this.show = false
				return e
			},
			// 选择值变化
			pickerChange(e) {
				console.log(e, '选择值')
				switch (this.changeVle) {
					case 2:
						this.sex = e.value[0]
						break;
					case 3:
						this.age = e.value[0]
						break;
					default:
						break;
				}
			}
			// 弹出层交互使用******** 结束

		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F2F2F2;
		height: 100vh;
	}

	// 弹出层样式
	::v-deep .u-popup__content {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-bottom: 100rpx;
	}

	::v-deep .u-toolbar {
		background: #FFB607;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	::v-deep.u-toolbar__title {
		color: #ffffff !important;
	}

	::v-deep .button_qd {
		position: fixed;
		z-index: 10078;
		width: 360rpx;
		height: 60rpx;
		font-size: 30rpx;
		background: #FF8106;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		bottom: 80rpx;
		margin-left: 25%;
		border-radius: 30rpx;
	}

	//弹出层样式end
	.heard {
		width: 750rpx;
		height: 242rpx;
		background: #FFB607;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.heardTitle {
		padding-top: 20%;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}

	.avatar {
		margin-top: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main {
		width: 650rpx;
		height: 650rpx;
		margin-top: -5%;
		margin-left: 50rpx;
		padding-top: 5%;
		padding-left: 50rpx;
		padding-right: 50rpx;
		background-image: url(#{$bgImageUrl}/assets/bjxxBG.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.case {
		padding: 40rpx 0 40rpx 0;
		width: 100%;
		border-bottom: 1px dashed #cccccc;
	}

	.point-container-inline {
		display: flex;
		align-items: center;
	}

	.points {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 30rpx;
	}

	.point-icon {
		width: 35rpx;
		height: 35rpx;
		padding-right: 20rpx;
	}

	.guajian-icon {
		width: 50rpx;
		height: 50rpx;
		border: 1rpx solid #cccccc;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.jiantou {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.jiantou-icon {
		width: 13rpx;
		height: 22rpx;
	}

	.caseInput-num {
		text-align: right;
		padding-right: 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #cccccc;
		line-height: 51rpx;
	}

	.inp-num {
		text-align: right;
		font-weight: 400;
		font-size: 24rpx;
		color: #cccccc;
	}

	::v-deep.title_input {
		color: #cccccc;
	}

	.popupStyle {
		height: 400rpx;
	}

	.popupHeard {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 77rpx;
		background-color: #FFB607;
		border-radius: 38rpx 38rpx 0rpx 0rpx;
	}

	.popupHeardCase {
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 77rpx;
	}

	.popupMain {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popupMainCase {
		height: 250rpx;
		margin-top: 30rpx;
		overflow-y: auto;
	}

	.popupMainCaseInfo {
		text-align: center;
		width: 100vw;
		height: 64rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
	}

	.popupMainCaseInfoActive {
		border-top: 0.5rpx solid #FFB607;
		border-bottom: 0.5rpx solid #FFB607;

		text-align: center;
		width: 100vw;
		height: 64rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
	}

	.popupFoot {
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		height: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popupFootCase {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popupFootCaseLeft {
		text-align: center;
		width: 100rpx;
		height: 40rpx;
		background: #808080;
		border-radius: 20rpx;
		margin-right: 80rpx;

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.popupFootCaseRight {
		text-align: center;
		width: 100rpx;
		height: 40rpx;
		background: #FF8106;
		border-radius: 20rpx;

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
</style>